<template>
  <div>
    <div class="car_div">
      <input
        type="checkbox"
        @click="selectAll()"
        :checked="checkedAll"
      />全选
      <div class="car_div_first" v-for="item in goods" :key="item.id">
        <input type="checkbox" @click="select(item)" :checked="item.choose"/>
        <div class="car_div_two">
          <p>{{item.name}}</p>
          <button @click="add(item)">+</button>
          <p>{{item.count}}</p>
          <button @click="minus(item)">-</button>
          <p>{{item.price}}元</p>
          <button @click="del(item,index)">删除</button>
        </div>
      </div>
      <p>总价:{{total}}元</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total:0,
      checkAll:false,
      goods: [
        {
          name: "苹果",
          price: 1,
          count: 1,
          choose: false,
        },
        {
          name: "梨",
          price: 5,
          count: 1,
          choose: false,
        },
        {
          name: "香蕉",
          price: 20,
          count: 1,
          choose: false,
        },
        {
          name: "西瓜",
          price: 10,
          count: 1,
          choose: false,
        },
        {
          name: "橘子",
          price: 2,
          count: 1,
          choose: false,
        },
      ],
    };
  },
  methods: {
   // 全选
   selectAll() {
      this.checkedAll = !this.checkedAll
      if(this.checkedAll){
         this.total=0
         this.goods.forEach((item) => {
            item.choose=true
            this.total+=item.price*item.count
         })
      }else{
         this.goods.forEach((item) => {
            item.choose = false
         });
         this.total = 0
      }
   },
   // 单选选中
   select(item){
      item.choose = !item.choose
      if(item.choose){
         this.total+=item.price*item.count
      }else{
         this.total-=item.price*item.count
      }
      // 判断全选
      this.checkAll=this.goods.every((item) => {item.choose})
   },
   // 点击增加
   add(item){
      item.count+=1
      if(item.choose){
         this.total+=item.price
      }
   },
   // 点击减少
   minus(item){
      if(item.count==1){
         alert('数量不能小于1')
         return false
      }
      item.count-=1
      if(item.choose){
         this.total-=item.price
      }
   },
   // 删除
   del(item,index){
      if(item.choose){
         item.choose=false
         this.total-=item.price*item.count
      }
      this.goods.splice(index,1)
   }
  },
};
</script>

<style lang="scss" scoped>
.car_div {
  width: 100%;
  padding: 20px;
  font-size: 15px;
  .car_div_first {
    display: flex;
    padding: 10px 0;
    input {
      margin-right: 20px;
    }
    .car_div_two {
      display: flex;
      P {
        margin-right: 10px;
      }
      button {
        margin-right: 10px;
        width: 50px;
        height: 20px;
        background-color: #949494;
        border-radius: 3px;
        border: 1px solid rgb(94, 94, 94);
        // line-height:15px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
